<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto layout-padding-view">
			<div class="splitpanes-container layout-pd" style="height: 100%">
				<splitpanes class="default-theme" @resize="paneSize = $event[0].size" style="height: 100%">
					<pane :size="23">
						<div class="tree-container">
							<div class="tree-header">
								<div class="header-title">
									<el-icon><ele-FolderOpened /></el-icon>
									<span>项目管理</span>
								</div>
								<div class="search-container">
									<el-input 
										v-model="filterText" 
										placeholder="搜索项目..." 
										prefix-icon="Search"
										clearable
										class="search-input"
									/>
								</div>
							</div>
							<div class="tree-box">
								<el-tree
									ref="treeRef"
									style="width: 100%"
									class="custom-tree"
									:data="state.itemTree"
									:props="state.defaultProps"
									:filter-node-method="filterNode"
									@node-click="handleNodeClick"
									:default-expanded-keys="state.defaultExpandedKeys"
									@node-expand="onNodeExpand"
									@node-collapse="onNodeCollapse"
									default-expand-all
								>
									<template #default="{ node, data }">
										<span class="custom-tree-node">
											<span class="node-icon-text">
												<span v-if="data.nodeType === 'folder'" class="folder-icon">
													<el-icon><FolderOpened v-if="node.expanded" /><Folder v-else /></el-icon>
												</span>
												<span v-else class="file-icon">
													<el-icon><Document /></el-icon>
												</span>
												<span class="node-text">{{ node.label }}</span>
											</span>
											<span class="node-btns">
												<el-button v-if="data.nodeType === 'folder'" type="primary" link size="small" @click.stop="handleAddItem(node, data)">新增</el-button>
												<el-button :disabled="data.id === 0" type="primary" link size="small" @click.stop="handleCopyItem(node, data)">复制</el-button>
												<el-button :disabled="data.id === 0" type="primary" link size="small" @click.stop="handleEditItem(node, data)">编辑</el-button>
												<el-button :disabled="data.id === 0" type="danger" link size="small" @click.stop="handleDeleteItem(node, data)">删除</el-button>
											</span>
										</span>
									</template>
								</el-tree>
							</div>
						</div>
					</pane>
					<pane :size="77">
						<splitpanes class="default-theme" :horizontal="true">
							<pane :size="36" min-size="34">
								<div v-if="state.clickNode && state.clickNode.data.nodeType === 'leaf'" class="app-versions-container">
									<!-- 版本管理头部区域 -->
									<div class="versions-header">
										<div class="header-title">
											<div class="main-title">
												<el-icon><Document /></el-icon>
												应用管理
												<div class="versions-count">
													<el-icon><ele-Collection /></el-icon>
													<span>{{ state.itemVersions.length }} 个版本</span>
												</div>
											</div>
											<div class="sub-title">{{ state.rightTitle }}</div>
										</div>
										<div class="header-actions">
											<div>
												<div class="button-container">
												<el-button type="primary"  @click="handleAddItemVersion" class="create-button">
													<el-icon><ele-Plus /></el-icon> 新建版本
												</el-button>
												<el-button type="warning" @click="handleFlowControl" class="flow-button">
													<el-icon><ele-Share /></el-icon> 管理流量
												</el-button>
											</div>
											</div>
										</div>
									</div>

									<!-- 版本卡片网格区域 -->
									<div class="versions-grid">
										<div 
											v-for="iv in state.itemVersions" 
											:key="iv.id"
											class="version-card"
											:class="{ 'card-clicked': state.clickedItemVersion && state.clickedItemVersion.id === iv.id }"
										>
											<div class="card-header" @click="handleCardClick(iv)">
												<div class="app-icon">
													<el-icon><ele-Monitor /></el-icon>
												</div>
												<div class="app-info">
													<div class="app-name">应用名: {{ state.clickNode.data.appName }}</div>
												</div>
											</div>
											<div class="card-body" @click="handleCardClick(iv)">
												<div class="info-item">
													<span class="label">版本号:</span>
													<span class="value">{{ iv.version }}</span>
												</div>
											</div>
											<div class="card-actions">
												<el-button-group>
													<el-button size="small" type="primary"  @click="handleCopyItemVersion(iv)">
														<el-icon><ele-CopyDocument />复制</el-icon>
													</el-button>
													<el-button size="small" type="primary"  @click="handleUpdateItemVersion(iv)">
														<el-icon><ele-Edit />编辑</el-icon>
													</el-button>
													<el-button size="small" type="danger"  @click="handleDeleteItemVersion(iv)">
														<el-icon><ele-Delete />删除</el-icon>
													</el-button>
												</el-button-group>
											</div>
										</div>
									</div>
								</div>
							</pane>
							<pane :size="64">
								<JenkinsBuild
									:operator-node="state.clickNode || {}"
									:operator-item-version="state.clickedItemVersion"
									ref="jenkinsBuildRef"
									v-if="state.clickedItemVersion"
								></JenkinsBuild>
							</pane>
						</splitpanes>
					</pane>
				</splitpanes>
			</div>
		</div>
		<ItemDialog ref="itemDialogRef" @refresh="handleItemDialogRefresh"></ItemDialog>
		<ItemVersionDialog ref="itemVersionDialogRef" @refresh="getItemVersions"></ItemVersionDialog>
		<FlowControlDialog :item-versions="state.itemVersions" ref="flowControlDialogRef"></FlowControlDialog>
	</div>
</template>

<script setup lang="ts" name="funSplitpanes">
import { nextTick, onBeforeMount, reactive, ref, watch } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
import { ElMessage, ElMessageBox, ElTree } from 'element-plus';
import { itemApi } from '/@/api/item';
import { Document, Folder, FolderOpened } from '@element-plus/icons-vue';
import ItemDialog from '/@/views/item/itemDialog.vue';
import FlowControlDialog from '/@/views/item/flowControlDialog.vue';
import ItemVersionDialog from '/@/views/item/itemVersionDialog.vue';
import { itemVersionApi } from '/@/api/itemVersion';
import JenkinsBuild from '/@/views/item/jenkinsBuild.vue';
import lodash from 'lodash';

// 定义变量内容
const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>();
const itemDialogRef = ref();
const itemVersionDialogRef = ref();
const flowControlDialogRef = ref();
const jenkinsBuildRef = ref();

const state = reactive({
	rightTitle: '',
	itemTree: [],
	clickNode: null,
	itemVersions: [],
	clickedItemVersion: null,
	defaultExpandedKeys: [],
	expandedKeys: [], // 展开的节点
	defaultProps: {
		children: 'children',
		label: 'name',
	},
});

watch(filterText, (val) => {
	treeRef.value!.filter(val);
});

const filterNode = (value: string, data: Tree) => {
	if (!value) return true;
	return data.name.includes(value);
};

const handleNodeClick = (data: Tree, node: any) => {
	// 只有叶子节点才有效，否则不做任何操作，防止右侧页面存在情况下，点击文件夹节点
	if (data.nodeType === 'leaf') {
		state.clickNode = node;
		state.clickedItemVersion = null;
		state.rightTitle =
			'节点名称: ' +
			state.clickNode.data.name +
			'（ 环境: ' +
			state.clickNode.data.meta.envName +
			' , 项目类型: ' +
			state.clickNode.data.appType +
			' , 部署类型: ' +
			state.clickNode.data.deployType +
			')';
		getItemVersions(data);
	}
};

const onNodeExpand = (data: any) => {
	state.expandedKeys.push(data.id);
};

const onNodeCollapse = (data: any) => {
	state.expandedKeys = state.expandedKeys.filter((item: any) => item !== data.id);
};

const handleAddItem = (node: any, data: Tree) => {
	itemDialogRef.value.openDialog('add', node, data);
};
const handleCopyItem = (node: any, data: Tree) => {
	const newData = lodash.cloneDeepWith(data, (value, key, obj) => {
		if (key === 'children' && obj === data) {
			return obj.nodeType === 'leaf' ? null : [];
		}
	});
	itemDialogRef.value.openDialog('copy', node, newData);
};
const handleEditItem = (node: any, data: Tree) => {
	itemDialogRef.value.openDialog('edit', node, data);
};

const handleAddItemVersion = () => {
	itemVersionDialogRef.value.openDialog('add', state.clickNode, null);
};

const handleFlowControl = () => {
	flowControlDialogRef.value.openDialog(state.clickNode);
};

const handleCardClick = (iv: any) => {
	state.clickedItemVersion = iv;
	nextTick(() => {
		jenkinsBuildRef.value?.setUpData(state.clickNode, iv);
	});
};

const handleDeleteItemVersion = (iv: any) => {
	ElMessageBox.confirm(`此操作将永久删除版本：${iv.version}, 是否继续?`, '提示', {
		confirmButtonText: '删除',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		itemVersionApi()
			.delItemVersion(iv)
			.then((res) => {
				ElMessage.success(res.msg);
				state.itemVersions.splice(state.itemVersions.indexOf(iv), 1);
			})
			.catch((res) => {
				ElMessage.error(res.msg);
			});
	}).catch(() => {
		// 用户取消删除操作，不需要做任何处理
	});
};

const handleCopyItemVersion = (iv: any) => {
	const newIv = lodash.cloneDeep(iv);
	itemVersionDialogRef.value.openDialog('copy', state.clickNode, newIv);
};

const handleUpdateItemVersion = (iv: any) => {
	itemVersionDialogRef.value.openDialog('edit', state.clickNode, iv);
};

const handleItemDialogRefresh = (type: string, node: any, data: Tree) => {
	// if (type === 'add' || type === 'copy') {
	// 	node.data.children.push(data);
	// } else if (type === 'edit') {
	// 	const childrenData = node.parent.data.children;
	// 	const index = childrenData.findIndex((item: Tree) => item.id === data.id);
	// 	if (index !== -1) {
	// 		childrenData[index] = data;
	// 	}
	// }
	getTreeData();
};

const handleDeleteItem = (node: any, data: Tree) => {
	ElMessageBox.confirm(`此操作将永久删除项目：${data.name}, 是否继续?`, '提示', {
		confirmButtonText: '删除',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		itemApi()
			.delItemNode(data)
			.then((res) => {
				ElMessage.success(res.msg);
				node.parent.data.children.splice(node.parent.data.children.indexOf(data), 1);
			})
			.catch((res) => {
				ElMessage.error(res.msg);
			});
	}).catch(() => {
		// 用户取消删除操作，不需要做任何处理
	});
};

// 点击叶子节点时，加载item版本信息
const getItemVersions = (data: Tree) => {
	itemVersionApi()
		.listItemVersions(data.id)
		.then((res) => {
			state.itemVersions = res.data;
		})
		.catch((err) => {
			ElMessage.error(err.msg);
		});
};

// 初始化树模拟数据
const getTreeData = () => {
	itemApi()
		.getItemTree()
		.then((res) => {
			state.itemTree = [
				{
					id: 0,
					name: '根节点',
					nodeType: 'folder',
					children: res.data,
				},
			];
			state.defaultExpandedKeys = state.expandedKeys;
		});
};
// 页面加载前
onBeforeMount(() => {
	getTreeData();
});

// 定义变量内容
const paneSize = ref(50);
</script>

<style scoped lang="scss">
.splitpanes.default-theme .splitpanes__pane {
	background-color: white;
	color: var(--el-color-primary-light-5);
	border: 1px solid var(--el-border-color-lighter);
}

/* 树形容器样式 */
.tree-container {
	height: 100%;
	background: linear-gradient(135deg, #f0f4ff 0%, #e6eeff 100%);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* 树形头部样式 */
.tree-header {
	padding: 16px;
	background: linear-gradient(135deg, #dedfe4 0%, #e6eeff 100%);
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	flex-shrink: 0;
}

.tree-header .header-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	color: #333;
	margin-bottom: 12px;
}

.tree-header .header-title .el-icon {
	font-size: 18px;
	color: #5c7cfa;
}

.search-container {
	width: 100%;
}

.search-input {
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-input .el-input__wrapper {
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	transition: all 0.3s ease;
}

.search-input .el-input__wrapper:hover {
	border-color: #5c7cfa;
	box-shadow: 0 0 0 2px rgba(92, 124, 250, 0.1);
}

.search-input .el-input__wrapper.is-focus {
	border-color: #5c7cfa;
	box-shadow: 0 0 0 2px rgba(92, 124, 250, 0.2);
}

/* 树形盒子样式 */
.tree-box {
	flex: 1;
	padding: 16px;
	overflow-y: auto;
}

/* 自定义滚动条 */
.tree-box::-webkit-scrollbar {
	width: 6px;
}

.tree-box::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.05);
	border-radius: 10px;
}

.tree-box::-webkit-scrollbar-thumb {
	background-color: #5c7cfa;
	border-radius: 10px;
	border: 1px solid transparent;
	background-clip: content-box;
}

.tree-box::-webkit-scrollbar-thumb:hover {
	background-color: #4c63d2;
}

/* 简化的树形样式 */
.custom-tree {
	background: transparent;
}

.custom-tree .el-tree-node {
	margin-bottom: 8px;
}

.custom-tree .el-tree-node__content {
	padding: 8px 12px;
	height: 48px;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: all 0.3s ease;
}

.custom-tree .el-tree-node__content:hover {
	background: rgba(255, 255, 255, 0.7);
	border-color: rgba(92, 124, 250, 0.3);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transform: translateY(-1px);
}

.custom-tree-node {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
}

.node-icon-text {
	display: flex;
	align-items: center;
	gap: 8px;
}

.folder-icon, .file-icon {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
}

.folder-icon {
	background: linear-gradient(135deg, #ffd93d 0%, #ff9500 100%);
	color: white;
}

.file-icon {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
}

.node-text {
	font-weight: 500;
	color: #333;
}

/* 节点按钮样式 */
.node-btns {
	display: flex;
	gap: 1px;
	// opacity: 0;
	transition: opacity 0.3s ease;	
}

.custom-tree .el-tree-node__content:hover .node-btns {
	opacity: 1;
}

.node-btns .el-button {
	padding: 2px 6px;
	height: 20px;
	font-size: 11px;
	border-radius: 3px;
	transition: all 0.2s ease;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.1);
	color: #666;
	margin-left: 3px;
}

.node-btns .el-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	background: rgba(255, 255, 255, 1);
}

.node-btns .el-button--primary {
	color: #409eff;
	border-color: rgba(64, 158, 255, 0.3);
}

.node-btns .el-button--primary:hover {
	color: #409eff;
	border-color: #409eff;
	background: rgba(64, 158, 255, 0.1);
}

.node-btns .el-button--danger {
	color: #f56c6c;
	border-color: rgba(245, 108, 108, 0.3);
}

.node-btns .el-button--danger:hover {
	color: #f56c6c;
	border-color: #f56c6c;
	background: rgba(245, 108, 108, 0.1);
}

/* 叶子节点选中效果 */
.custom-tree .el-tree-node.is-current > .el-tree-node__content {
	background: linear-gradient(135deg, rgba(92, 124, 250, 0.2) 0%, rgba(102, 126, 234, 0.15) 100%) !important;
	border-color: #5c7cfa !important;
	box-shadow: 0 0 0 2px rgba(92, 124, 250, 0.3), 0 4px 12px rgba(92, 124, 250, 0.2) !important;
	transform: none !important;
}

.custom-tree .el-tree-node.is-current > .el-tree-node__content .node-text {
	color: #5c7cfa;
	font-weight: 600;
}

.custom-tree .el-tree-node.is-current > .el-tree-node__content .folder-icon,
.custom-tree .el-tree-node.is-current > .el-tree-node__content .file-icon {
	box-shadow: 0 2px 8px rgba(92, 124, 250, 0.4);
	transform: scale(1.05);
}

.default-card {
	cursor: pointer; /* 鼠标悬停样式 */
}

.card-clicked {
	background-color: #c7c7c7; /* 点击后的背景色 */
}

.bottom {
	/* margin-top: 13px; */
	line-height: 12px;
}

.button {
	padding: 0;
	float: right;
}



/* 应用版本容器样式 */
.app-versions-container {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: linear-gradient(135deg, #f0f4ff 0%, #e6eeff 100%);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

/* 版本管理头部样式 */
.versions-header {
	padding: 12px 16px;
	background: linear-gradient(135deg, #dedfe4 0%, #e6eeff 100%);
	color: #333;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-shrink: 0;
	margin-bottom: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	border-radius: 6px 6px 0 0;
}

.header-title .main-title {
	font-size: 16px;
	font-weight: 600;
	display: flex;
	align-items: center;
	color: #333;
}

.header-title .main-title .el-icon {
	margin-right: 6px;
	font-size: 16px;
	color: #5c7cfa;
}

.header-title .sub-title {
	font-size: 12px;
	color: #666;
	margin-top: 2px;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* 版本计数器样式 */
.versions-count {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 500;
	padding: 2px 8px;
	background: rgba(92, 124, 250, 0.1);
	border-radius: 12px;
	border: 1px solid rgba(92, 124, 250, 0.2);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	overflow: hidden;
	position: relative;
	color: #5c7cfa;
	margin-left: 8px;
	vertical-align: middle;
}

.versions-count:hover {
	transform: translateY(-1px);
	background: rgba(92, 124, 250, 0.15);
}

.versions-count::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(to right, transparent, rgba(92, 124, 250, 0.1), transparent);
	transform: rotate(30deg);
	transition: transform 0.5s ease;
	animation: shine 3s infinite;
}

@keyframes shine {
	0% {
		left: -100%;
	}
	100% {
		left: 100%;
	}
}

.versions-count .el-icon {
	font-size: 13px;
	color: #5c7cfa;
}

/* 按钮容器和按钮样式 */
.button-container {
	display: flex;
	gap: 8px; /* 按钮之间的间距 */
}

.header-actions .button-container .el-button {
	padding: 6px 12px;
	height: 32px;
	transition: all 0.2s ease;
	border-radius: 4px;
}

/* 新建版本按钮样式 - 标准Element UI primary按钮 */
.header-actions .button-container .create-button {
	background-color: #409eff;
	border-color: #409eff;
	color: white;
}

.header-actions .button-container .create-button:hover {
	background-color: #66b1ff;
	border-color: #66b1ff;
	box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
}

/* 管理流量按钮样式 - 标准Element UI warning按钮 */
.header-actions .button-container .flow-button {
	background-color: #e6a23c;
	border-color: #e6a23c;
	color: white;
}

.header-actions .button-container .flow-button:hover {
	background-color: #ebb563;
	border-color: #ebb563;
	color: white;
	box-shadow: 0 2px 4px rgba(230, 162, 60, 0.2);
}

.header-actions .button-container .el-button .el-icon {
	font-size: 14px;
	margin-right: 4px;
}

/* 版本卡片网格样式 */
.versions-grid {
	padding: 20px;
	overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	max-height: 400px;
}

/* 自定义滚动条 */
.versions-grid::-webkit-scrollbar {
	width: 8px;
}

.versions-grid::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.05);
	border-radius: 10px;
}

.versions-grid::-webkit-scrollbar-thumb {
	background-color: #764ba2;
	border-radius: 10px;
	border: 2px solid transparent;
	background-clip: content-box;
}

.versions-grid::-webkit-scrollbar-thumb:hover {
	background-color: #667eea;
}

/* 版本卡片样式 */
.version-card {
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	cursor: pointer;
	display: flex;
	flex-direction: column;
}

.version-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	border-color: rgba(255, 255, 255, 0.8);
}

.version-card.card-clicked {
	border-color: #667eea;
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}

/* 卡片头部样式 */
.card-header {
	display: flex;
	align-items: center;
	padding: 14px 16px;
	border-bottom: 1px solid rgba(102, 126, 234, 0.1);
	background-color: rgba(102, 126, 234, 0.03);
}

.app-icon {
	width: 32px;
	height: 32px;
	background-color: #667eea;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px;
}

.app-icon .el-icon {
	color: white;
	font-size: 18px;
}

.app-info {
	width: 100%;
	overflow: hidden;
}

.app-info .app-name {
	font-weight: 600;
	font-size: 15px;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 卡片内容样式 */
.card-body {
	padding: 10px;
	display: flex;
	align-items: center;
}

.info-item {
	color: #333;
	display: flex;
	align-items: center;
	width: 100%;
}

.info-item .label {
	font-size: 15px;
	font-weight: 600;
}

.info-item .value {
	font-size: 15px;
	font-weight: 600;
	margin-left: 30px;
}

/* 标签容器样式 */
.tag-container {
	padding-left: 4px;
}

.tag-container .el-tag {
	border-radius: 4px;
	font-weight: 500;
}

/* 卡片操作区样式 */
.card-actions {
	padding: 10px 16px;
	background-color: rgba(102, 126, 234, 0.05);
	border-top: 1px solid rgba(102, 126, 234, 0.1);
	display: flex;
	justify-content: flex-end;
}

.card-actions .el-button-group {
	display: flex;
	gap: 4px;
}

.card-actions .el-button-group .el-button {
	transition: all 0.2s ease;
	margin-left: 0;
	border-radius: 4px;
	
}

.card-actions .el-button-group .el-button:hover {
	transform: scale(1.05);
	/* background-color: rgba(102, 126, 234, 0.1); */
}

/* 覆盖 Element Plus 按钮样式 */
.el-button-group .el-button--small {
	padding: 8px 12px;
}

.el-button-group .el-button--text {
	padding: 4px 8px;
}
</style>
